window.onload = function () {
    var obox = document.querySelector(".box");
    var olist = document.querySelector(".list");
    var ospan = document.querySelector(".list span");
    var obig = document.querySelector(".big");
    var bimg = document.querySelectorAll(".big img");
    var oli = document.querySelectorAll("ul li");
    var oldiv = document.querySelectorAll(".list div");
    var obdiv = document.querySelectorAll(".big div");
    var maxX = (maxY = 0);
    ///當前顯示的圖片下標志
    var num = 0;
    var w = (h = 800);

    olist.onmouseover = function () {
        ospan.style.display = "block";
        obig.style.display = "block";
        maxX = olist.offsetWidth - ospan.offsetWidth;
        maxY = olist.offsetHeight - ospan.offsetHeight;
    };

    olist.onmouseout = function () {
        ospan.style.display = "none";
        obig.style.display = "none";
    };

    //给每个li添加鼠标移入事件
    for (let i = 0; i < oli.length; i++) {
        oli[i].index = i;
        oli[i].onmouseover = function () {
            num = this.index;
            for (let j = 0; j < oli.length; j++) {
                oli[j].className = "";

                oldiv[j].style.display = "none";
                obdiv[j].style.display = "none";
            }
            this.className = "active";

            obdiv[this.index].style.display = "block";
            oldiv[this.index].style.display = "block";
        };
    }
    //-------------接下来实现放大效果

    ospan.onmousemove = function (e) {
        var oEv = e || event;

        var x = oEv.clientX - obox.offsetLeft - ospan.offsetWidth / 2,
            y = oEv.clientY - obox.offsetTop - ospan.offsetHeight / 2;
        ///-----限制範圍

        x <= 0 ? (x = 0) : x;
        y <= 0 ? (y = 0) : y;
        //最小移动范围
        x >= maxX ? (x = maxX) : x;
        y >= maxY ? (y = maxY) : y;
        //最大移动范围
        ///--接下來計算放大鏡的移動比例
        var scaleX = x / maxX;
        scaleY = y / maxY;

        //--接下來大圖的最大移動範圍

        var bmaxX = w - obig.offsetWidth;
        bmaxY = h - obig.offsetHeight;
        ///---設置大圖的left和top

        bimg[num].style.left = -scaleX * bmaxX + "px";
        bimg[num].style.top = -scaleY * bmaxY + "px";

        ospan.style.left = x + "px";
        ospan.style.top = y + "px";
    };

}


function $(select) {
    return document.querySelector(select)
}